import { ref, readonly, provide, inject } from 'vue';
import { loadStyleSheet } from './styles/styleLoader.js';

// 创建一个Symbol作为inject的key，避免命名冲突
const FONT_SIZE_KEY = Symbol('fontSize');

// 创建一个状态管理函数
export function createFontSizeStore() {
  // 使用ref创建响应式状态
  const isLargeFont = ref(false);

  // 切换字体大小的方法
  function toggleFontSize() {
    isLargeFont.value = !isLargeFont.value;
    // 保存到localStorage，使刷新页面后保持状态
    localStorage.setItem('isLargeFont', isLargeFont.value ? 'true' : 'false');
    // 调用loadStyleSheet函数更新样式
    loadStyleSheet(isLargeFont.value);
  }

  // 初始化时从localStorage读取状态
  function initFontSize() {
    const savedSize = localStorage.getItem('isLargeFont');
    if (savedSize !== null) {
      isLargeFont.value = savedSize === 'true';
    }
  }

  // 提供给应用使用
  function provideFontSize() {
    initFontSize();
    provide(FONT_SIZE_KEY, {
      isLargeFont: readonly(isLargeFont),
      toggleFontSize
    });
  }

  // 在组件中注入使用
  function useFontSize() {
    const fontSizeContext = inject(FONT_SIZE_KEY);
    if (!fontSizeContext) {
      throw new Error('useFontSize must be used within a component that has provideFontSize called in an ancestor');
    }
    return fontSizeContext;
  }

  return {
    provideFontSize,
    useFontSize
  };
}

// 创建并导出一个单例实例
const fontSizeStore = createFontSizeStore();
export default fontSizeStore;